<template>
  <div class="content-box">
    <heading grade="1">
      {{title}}
      <i class="history_total">共<span>{{classCount.count}}</span>课时，已上<span>{{classCount.alreadyCount}}</span>课时</i>
    </heading>
    <div class="history_list">
      <el-table
        :data="historyData"
        stripe
        style="width: 100%">
        <el-table-column
          label="课时"
          align="center"
          :show-overflow-tooltip="true"
          type="index"
          width="80">
        </el-table-column>
        <el-table-column
          prop="subjectName"
          label="学科名称"
          :show-overflow-tooltip="true"
          align="center"
          width="150">
        </el-table-column>
        <el-table-column
          prop="name"
          label="上课时间"
          :show-overflow-tooltip="true"
          align="center"
          width="120">
          <template scope="scope">
            <p>{{scope.row.beginDate | FormatDate('yyyy.MM.dd')}} {{scope.row.weekCode | getWeekDay}}</p>
            <p>{{scope.row.startTime | FormatDate('HH:mm')}}-{{scope.row.endTime | FormatDate('HH:mm')}}</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          align="center"
          :show-overflow-tooltip="true"
          label="上课地点" width="180">
        </el-table-column>
        <el-table-column
          prop="teacher"
          align="center"
          :show-overflow-tooltip="true"
          label="授课教练" width="100">
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          label="出勤情况">
          <template scope="scope">
            <div v-if="scope.row.status == 0">
              <p v-for="item in scope.row.attendanceRecord" :key="item" v-html="item"></p>
            </div>
            <p class="red_color" v-else>改期上课</p>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import trainApi from 'api/train'
export default {
  created () {
    let params = {
      classId: this.$route.query.classid,
      curoseId: this.$route.query.curoseid
    }
    trainApi.classScheduleTimeInfo(params).then((res) => {
      this.classCount = res.data
    })
    trainApi.classScheduleInfo(params).then((res) => {
      this.historyData = res.data.list
    })
  },
  data () {
    return {
      title: '上课记录',
      classCount: '',
      historyData: []
    }
  },
  methods: {
  }
}
</script>
<style lang="scss">
.history_total{
  font-style:normal;
  font-size:14px;
  font-weight:normal;
  span{
    color:#f30;
  }
}
.history_list{
  border-top:1px solid #efefef;
  padding-top: 20px;
  .cell{
    font-size:12px;
    padding:0 10px;
  }
  .red_color{
    color:#f30;
  }
}
</style>
